<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*   这里的 * 是通配符    */
			
			* {
				margin: 0px; /*去除元素和元素之间的边距即外边距*/
				padding: 0px;/*去除标签和内容之间的边距 即内边距*/
				list-style: none;/*取出ul的黑点*/
				text-decoration: none;/*去除超链接的下划线*/
			}
			/*css语法：选择器  {属性名:属性值 }*/
			/*类选择器的前缀 是 . */
			
			.mod_container {
				background-color: aqua;/*添加背景色*/
				width: 200px;
			}
			
			.j_top {
				height: 28px;
				background-color: chartreuse;
			}
			
			.f1 {
				float: left; /*使元素脱离文档流的限制，和其他元素同行显示*/
				width: 100px;
			}
			.f2 {
				width: 500px;
				float: right;/*使元素脱离文档流的限制，和其他元素同行显示*/
			}
			li {
				float: left;/*使元素脱离文档流的限制，和其他元素同行显示*/
			}
			.shorcut {
				margin: auto;
				background-color: red;
				width: 1000px;
				height: 28px;
			}
			
			.navigation{
	/*			text-align: center;
				vertical-align: center;*/
				line-height: 28px; /*设置文字的行高和父元素相同来进行文字的垂直方向上的居中*/
			}
			.logo{
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<!--外层容器-->
		<!--class 是css的类选择器：选择同一类型的元素的选择器-->
		<div style="background-color: aqua;">
			<div class="j_top">
				<div class="shorcut">
					<div class="navigation">
						<ul class="f1">
							<li>
								<a href="http://www.baidu.com">陕西</a>
							</li>
						</ul>
						<ul class="f2">
							<li>
								<a href="http://www.baidu.com">您好，请登录</a>
							</li>
							<li>
								<a href="http://www.baidu.com">您好，请登录</a>
							</li>
							<li>
								<a href="http://www.baidu.com">您好，请登录</a>
							</li>
							<li>
								<a href="http://www.baidu.com">您好，请登录</a>
							</li>
							<li>
								<a href="http://www.baidu.com">您好，请登录</a>
							</li>
						</ul>
					</div>

				</div>
			</div>
			
			<!--log start-->
			<div class="logo">
				<div class="shorcut">
					
				</div>
			</div>
			<!--log end-->
			
		</div>
	</body>

</html>